<template>
  <view class="swtich-group">
    <!-- 顶部 -->
    <view class="top-block">
      <view class="explain-text">
        当前第{{ currentBox.index }}箱，共{{ total }}箱</view
      >
    </view>
    <view class="switch-btn">
      <view
        class="switch-b"
        @tap="onClickOperate($event, 'previous', {})"
        hover-class="hover-bubble"
      >
        <image class="image" :src="pre"
      /></view>
      <view class="open-all" hover-class="hover-bubble" @tap="openBoxList">
        <view class="power" :style="'transform: translateX(-' + power + '%)'">
        </view>
        <!-- <image
            class="power"
            :style="'transform: translateX(-' + power + '%)'"
            :src="silder_0"
          /> -->
        <view class="text">
          <view> 换箱 </view>
          <view class="count">
            本箱剩余 : {{ currentBox.box_num.surplus }} /
            {{ currentBox.box_num.total }}
          </view>
        </view>
      </view>
      <view
        class="switch-b"
        hover-class="hover-bubble"
        @tap="onClickOperate($event, 'next', {})"
      >
        <image class="image" :src="next" />
      </view>
    </view>
  </view>
</template>
<script>
import pre from '../img/previous.png';
import next from '../img/next.png';

import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(100);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    height: {
      type: Object,
      default: () => ({}),
    },
    currentBox: {
      type: Object,
      default: () => ({}),
    },
    total: {
      type: [String, Number],
      default: 0,
    },
  },

  data() {
    return {
      pre,
      next,
    };
  },
  // 计算属性 适配者模式
  computed: {
    power() {
      return (
        100 -
        (this.currentBox.box_num.surplus / this.currentBox.box_num.total) * 100
      );
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // next
          case 'next':
            this.onNext(data);
            break;
          // previous
          case 'previous':
            this.onPrevious(data);
            break;
          // look
          case 'look':
            this.lookDetailsMod(data);
            break;
        }
      });
    },
    onNext() {
      // if (this.swiperCurrent == 2) {
      //   this.swiperCurrent = 0;
      // } else {
      //   this.swiperCurrent = this.swiperCurrent + 1;
      // }
      this.$emit('next', true);
    },
    onPrevious() {
      // if (this.swiperCurrent == 0) {
      //   this.swiperCurrent = 2;
      // } else {
      //   this.swiperCurrent = this.swiperCurrent - 1;
      // }
      this.$emit('previous', true);
    },
    lookDetailsMod(ev) {
      this.$emit('look', ev);
    },
    openBoxList() {
      this.$emit('open', true);
    },
  },
};
</script>
<style lang="scss" scoped>
.swtich-group {
  width: 100%;
  height: 100%;

  .switch-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 3rpx 4rpx 2rpx;
    .switch-b {
      width: 33rpx;
      height: 30rpx;
      .image {
        width: 33rpx;
        height: 30rpx;
      }
    }
    .open-all {
      overflow: hidden;
      width: 148rpx;
      height: 30rpx;
      border-radius: 40rpx;
      border: 2rpx solid #8831fc;
      background-color: rgba(148, 86, 223, 0.22);
      position: relative;
      .power {
        transform: translateX(-100%);
        position: relative;
        left: -5rpx;
        width: 150rpx;
        height: 100%;
        overflow: hidden;

        border-radius: 7rpx;
        box-shadow: 0 1.5rpx 3rpx 3rpx rgba(255, 255, 255, 0.4) inset;
        transition: all 0.4s;
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
          );

          background-size: 15rpx 15rpx;
          animation: progress-bar-stripes 2s linear 0s infinite normal none;
        }
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(
            90deg,
            rgba(169, 82, 217, 1),
            rgba(116, 92, 232, 1)
          );
          box-shadow: 0 3rpx 8rpx rgba(255, 255, 255, 0.45) inset;
        }
      }
      .text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 13rpx;
        font-weight: 600;
        color: #ffffff;
        text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.6);
        view {
          line-height: 1;
        }
      }
      .count {
        margin-top: 1rpx;
        font-size: 10rpx;
        font-weight: 600;
        color: #ffffff;
        line-height: 12rpx;
      }
    }
  }
  .top-block {
    // border-radius: 10rpx 10rpx 0 0;
    width: 100%;
    // background-color: #fff;

    .explain-text {
      padding-top: 8rpx;
      text-align: center;
      font-size: 12rpx;
      font-weight: 800;
      color: #835ae4;
    }
  }
}
</style>
